<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>精子和卵子的恋爱</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: "PingFangSC-Regular";
        }

        .swiper-container {
            width: 100%;
            height: 100%;
            background: #000;


        }

        .swiper-slide {
            width: 100%;
            height: 100%;
            background: url(upload/bg.jpg) no-repeat left top;
            background-size: 100% 100%;

        }

        img {
            display: block;
        }

        .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            background: #fff;
            opacity: .4;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
        }

        @-webkit-keyframes start {

            0%,
            30% {
                opacity: 0;
                -webkit-transform: translate(0, 10px);
            }

            60% {
                opacity: 1;
                -webkit-transform: translate(0, 0);
            }

            100% {
                opacity: 0;
                -webkit-transform: translate(0, -8px);
            }
        }

        @-moz-keyframes start {

            0%,
            30% {
                opacity: 0;
                -moz-transform: translate(0, 10px);
            }

            60% {
                opacity: 1;
                -moz-transform: translate(0, 0);
            }

            100% {
                opacity: 0;
                -moz-transform: translate(0, -8px);
            }
        }

        @keyframes start {

            0%,
            30% {
                opacity: 0;
                transform: translate(0, 10px);
            }

            60% {
                opacity: 1;
                transform: translate(0, 0);
            }

            100% {
                opacity: 0;
                transform: translate(0, -8px);
            }
        }

        .ani {
            position: absolute;
        }

        .txt {
            position: absolute;
        }

        #array {
            position: absolute;
            z-index: 999;
            -webkit-animation: start 1.5s infinite ease-in-out;
        }

        .title1 {
            font-size: 1rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1.4rem;
            letter-spacing: 0px;
            color: #fefefe;
            text-align: center;
        }

        .title2 {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 20px 30px;
            display: flex;
            display: -webkit-flex;
        }

        .timeTxt {
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
        }

        .title2 p:first-child {
            font-size: 0.8rem;
            color: #453f49;
        }

        .title2 p:last-child {
            font-size: 0.8rem;
            color: #ae58ed;
        }

        .title3 {
            color: #fff;
        }

        .dilog {
            background: url("./upload/p2/qi.png") no-repeat;
            background-size: 100%;
            font-size: .7rem;
            padding: 10px 0 0 30px;
            color: #694e7d;
        }

        .title4 {
            color: #fff;
            font-size: .8rem;
            text-align: center;
            line-height: 1.4rem;
        }

        .title4 p:nth-child(2) span {
            border-bottom: 2px solid #fff;
        }

        .ttitle4 p:last-child {
            font-size: 1rem;
        }

        .title4 p:last-child span {
            color: #ffc05c;
        }

        .title5 {
            color: #fff;
            text-align: center;
            line-height: 1.4rem;
            font-size: .7rem;
        }

        .title6 {
            background-color: #c084e6;
            border-radius: 24px;
            color: #ffc05c;
            font-size: .7rem;
            line-height: 1.7rem;
            text-align: center;
            font-family: 'STHeitiSC-Light';
        }

        .titleSTHeitiSC-Medium {
            font-family: 'STHeitiSC-Medium';
        }

        .title6FF {
            color: #fff;
        }

        .title7 {
            background-color: #ae58ed;
            opacity: 0.7;
            color: #fff;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }

        .title8 {
            color: #fff;
            font-size: .7rem;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-------------slide1----------------->
            <section class="swiper-slide swiper-slide1">
                <div class="ani resize title1" style="width:320px;height:43px;left:0px;top:30px;z-index:3;"
                    data-slide-in="at 0 from zoomIn use swing during 1000">
                    <p>想要健康聪明的宝宝，</p>
                    <p>你会从什么时候开始准备？</p>
                </div>
                <img src="upload/p1/p2.png" class="ani resize" style="width:300px;height:260px;left:-30px;top:180px;z-index:1;"
                    data-slide-in="at 500 from fadeInLeft use swing during 1000" data-slide-out="at 0 to fadeOut use swing during 500 force">
                <img src="upload/p1/p1.png" class="ani resize" style="width:260px;height:220px;left:100px;top:120px;z-index:1;"
                    data-slide-in="at 500 from fadeInRight use swing during 1000" data-slide-out="at 0 to fadeOut use swing during 500 force">

                <img src="upload/p1/p3.png" class="ani resize" style="width:300px;height:188px;left:10px;top:140px;z-index:1;"
                    data-slide-in="at 2200 from fadeIn use swing during 500">
                <img src="upload/p1/p4.png" class="ani resize" style="width:300px;height:188px;left:10px;top:140px;z-index:3;"
                    data-slide-in="at 2600 from fadeIn use swing during 500">

            </section>
            <!---------------slide2-------------->
            <section class="swiper-slide swiper-slide2">
                <div class="ani resize title2" style="width:250px;left:10px;top:30px;z-index:3;" data-slide-in="at 0 from bounceInRight use swing during 1000">
                    <img src="upload/p2/time.png" class="resize" style="width:80px;height: 65px;">
                    <div class="timeTxt">
                        <div>
                            <p>卵子排出后12小时是</p>
                            <p>黄金受孕时期</p>
                        </div>
                    </div>
                </div>

                <div class="ani resize title3" style="width:250px;left:10px;top:150px;z-index:3;" data-slide-in="at 500 from bounceInLeft use swing during 1000">
                    <p>此时遇上卵子</p>
                    <p>健康聪明宝宝的概率</p>
                    <img src="upload/p2/up.png" class="ani resize" style="width:100px;height:100px;left:180px;top:0px;z-index:1;"
                        data-slide-in="at 1500 from swing use swing during 1000">
                </div>


                <div class="ani resize dilog" style="width:100px;height:70px;left:10px;top:250px;z-index:1;"
                    data-slide-in="at 2800 from fadeIn use swing during 500">
                    <p>在对的时间，</p>
                    <p>遇到对的你！</p>
                </div>

                <div class="ani resize dilog" style="width:100px;height:70px;left:180px;top:290px;z-index:1;"
                    data-slide-in="at 3300 from fadeIn use swing during 500">
                    <p>你正值妙龄，</p>
                    <p>我年轻力壮！</p>
                </div>

                <img src="upload/p2/xin.png" class="ani resize" style="width:70px;height:50px;left:110px;top:310px;z-index:1;"
                    data-slide-in="at 4000 from fadeInUp use swing during 500">

                <img src="upload/p2/luan.png" class="ani resize" style="width:110px;height:80px;left:10px;top:350px;z-index:3;"
                    data-slide-in="at 2500 from fadeIn use swing during 500">

                <img src="upload/p2/jing.png" class="ani resize" style="width:220px;height:80px;left:130px;top:350px;z-index:3;"
                    data-slide-in="at 3000 from bounceInRight use swing during 500">

            </section>
            <!----------------slide3-------------->
            <section class="swiper-slide swiper-slide3">
                <div class="ani resize title4" style="width:320px;height:43px;left:10px;top:30px;z-index:3;">
                    <p>40年前曾有科学研究就表明</p>
                    <p><span>唾液可以检测排卵！</span></p>
                    <p>现如今，<span>佑蜜真的做！到！了！</span></p>
                </div>

                <div class="ani resize dilog" style="width:100px;height:70px;left:180px;top:130px;z-index:3;"
                    data-slide-in="at 500 from fadeIn use swing during 500">
                    <p>唾液的激素</p>
                    <p>反应我的状态</p>
                </div>

                <img src="upload/p3/xwj.png" class="ani resize" style="width:230px;height:120px;left:50px;top:120px;z-index:3;">
                <img src="upload/p3/bg.png" class="ani resize" style="width:320px;height:150px;left:10px;top:50px;z-index:1;">

                <div class="ani resize title5" style="width:320px;height:43px;left:0px;top:270px;z-index:3;">
                    <p>多所中美高校联合研发</p>
                </div>

                <img src="upload/p3/fd.png" class="ani resize" style="width:65px;height:30px;left:10px;top:310px;z-index:1;">
                <img src="upload/p3/hf.png" class="ani resize" style="width:65px;height:30px;left:85px;top:310px;z-index:1;">
                <img src="upload/p3/tj.png" class="ani resize" style="width:65px;height:30px;left:165px;top:310px;z-index:1;">
                <img src="upload/p3/yl.png" class="ani resize" style="width:65px;height:30px;left:245px;top:310px;z-index:1;">

                <div class="ani resize title5" style="width:320px;height:43px;left:10px;top:370px;z-index:3;">
                    <p>先进的MND技术*和纳米金电极</p>
                </div>

                <img src="upload/p3/xj.png" class="ani resize" style="width:250px;height:30px;left:40px;top:400px;z-index:3;">

            </section>
            <!-------------slide4----------------->
            <section class="swiper-slide swiper-slide4">

                <div class="ani resize title1" style="width:320px;height:43px;left:0px;top:30px;z-index:3;">
                    每天两步，智能检测结果
                </div>

                <img src="upload/p4/step1.png" class="ani resize" style="width:130px;height:70px;left:110px;top:100px;z-index:3;">

                <div class="ani resize title5" style="width:320px;height:43px;left:10px;top:180px;z-index:3;">
                    1、每日晨起后，取第一滴唾液
                </div>

                <img src="upload/p4/step2.png" class="ani resize" style="width:220px;height:80px;left:60px;top:260px;z-index:3;">

                <div class="ani resize title5" style="width:320px;height:43px;left:10px;top:350px;z-index:3;">
                    2、打开佑蜜电子优孕宝，连接APP检测
                </div>

                <div class="ani resize title6" style="width:100px;height:24px;left:110px;top:380px;z-index:3;">
                    90秒出结果
                </div>

            </section>

            <!-------------slide5----------------->
            <section class="swiper-slide swiper-slide4">
                <div class="ani resize title1 titleSTHeitiSC-Medium" style="width:320px;height:43px;left:0px;top:30px;z-index:3;">
                    超85%用户，找到优孕时刻！
                </div>

                <div class="ani resize title6 title6FF" style="width:195px;height:27px;left:60px;top:60px;z-index:3;">
                    数据来源于量准科学研究
                </div>


                <div class="ani resize title7" style="width:150px;height:130px;left:80px;top:200px;z-index:4; opacity: 0.7;"
                    data-slide-in="at 2000 from zoomIn use swing during 1000">
                    小红书评论墙
                </div>


                <img src="upload/p5/1.png" class="ani resize" style="width:90px;height:63px;left:13px;top:120px;z-index:3;"
                    data-slide-in="at 0 from fadeInDown use swing during 1000">
                <img src="upload/p5/2.png" class="ani resize" style="width:90px;height:63px;left:115px;top:130px;z-index:3;"
                    data-slide-in="at 100 from fadeInDown use swing during 1000">
                <img src="upload/p5/3.png" class="ani resize" style="width:90px;height:63px;left:216px;top:110px;z-index:3;"
                    data-slide-in="at 200 from fadeInDown use swing during 1000">

                <img src="upload/p5/4.png" class="ani resize" style="width:90px;height:108px;left:13px;top:188px;z-index:3;"
                    data-slide-in="at 300 from fadeInDown use swing during 1000">
                <img src="upload/p5/5.png" class="ani resize" style="width:90px;height:63px;left:115px;top:198px;z-index:3;"
                    data-slide-in="at 400 from fadeInDown use swing during 1000">
                <img src="upload/p5/6.png" class="ani resize" style="width:90px;height:63px;left:216px;top:178px;z-index:3;"
                    data-slide-in="at 500 from fadeInDown use swing during 1000">

                <img src="upload/p5/7.png" class="ani resize" style="width:90px;height:60px;left:13px;top:301px;z-index:3;"
                    data-slide-in="at 600 from fadeInDown use swing during 1000">
                <img src="upload/p5/8.png" class="ani resize" style="width:90px;height:111px;left:115px;top:266px;z-index:3;"
                    data-slide-in="at 700 from fadeInDown use swing during 1000">
                <img src="upload/p5/9.png" class="ani resize" style="width:90px;height:111px;left:216px;top:246px;z-index:3;"
                    data-slide-in="at 800 from fadeInDown use swing during 1000">

                <img src="upload/p5/10.png" class="ani resize" style="width:90px;height:60px;left:13px;top:366px;z-index:3;"
                    data-slide-in="at 900 from fadeInDown use swing during 1000">
                <img src="upload/p5/11.png" class="ani resize" style="width:90px;height:65px;left:115px;top:382px;z-index:3;"
                    data-slide-in="at 1000 from fadeInDown use swing during 1000">
                <img src="upload/p5/12.png" class="ani resize" style="width:90px;height:60px;left:216px;top:362px;z-index:3;"
                    data-slide-in="at 1100 from fadeInDown use swing during 1000">

                <img src="upload/p5/bg.png" class="ani resize" style="width:320px;height:490px;left:0px;top:50px;z-index:1;">



            </section>

            <!-------------slide6----------------->
            <section class="swiper-slide swiper-slide4">

                <img src="upload/p6/right.png" class="ani resize" style="width:115px;height:100px;left:210px;top:0px;z-index:3;">
                <img src="upload/p6/left.png" class="ani resize" style="width:56px;height:45px;left:10px;top:40px;z-index:3;">

                <img src="upload/p6/two.png" class="ani resize" style="width:135px;height:20px;left:70px;top:60px;z-index:3;">
                <img src="upload/p6/once.png" class="ani resize" style="width:135px;height:20px;left:120px;top:100px;z-index:3;">


                <div class="ani resize title1 titleSTHeitiSC-Medium" style="width:320px;height:43px;left:20px;top:170px;z-index:3;">
                    佑蜜，找到你的优孕时刻！
                </div>

                <img src="upload/p6/2m.png" class="ani resize" style="width:170px;height:130px;left:80px;top:220px;z-index:3;">

                <div class="ani resize title8" style="width:170px;height:130px;left:90px;top:370px;z-index:3;">
                    关注“佑蜜”获取更多好孕
                </div>



            </section>



        </div>

        <img src="images/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">
        <div class="swiper-pagination"></div>
    </div>


    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.min.js"></script>
    <script src="js/swiper.animate-twice.min.js"></script>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);

        scaleW = window.innerWidth / 320;
        scaleH = window.innerHeight / 480;
        var resizes = document.querySelectorAll('.resize');
        for (var j = 0; j < resizes.length; j++) {
            resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
            resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
            resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
            resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
        }

        var mySwiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            pagination: '.swiper-pagination',
            //virtualTranslate : true,
            mousewheelControl: true,
            onInit: function (swiper) {
                swiperAnimateCache(swiper);
                swiperAnimate(swiper);
            },
            onSlideChangeEnd: function (swiper) {
                swiperAnimate(swiper);
            },
            onTransitionEnd: function (swiper) {
                swiperAnimate(swiper);
            },


            watchSlidesProgress: true,

            onProgress: function (swiper) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides[i];
                    var progress = slide.progress;
                    var translate = progress * swiper.height / 4;
                    scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
                    var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5);
                    slide.style.opacity = opacity;
                    es = slide.style;
                    es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform =
                        es.transform =
                        'translate3d(0,' + translate + 'px,-' + translate + 'px) scaleY(' + scale + ')';

                }
            },

            onSetTransition: function (swiper, speed) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    es = swiper.slides[i].style;
                    es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration =
                        es.OTransitionDuration = es.transitionDuration = speed + 'ms';

                }
            },



        })
    </script>
</body>

</html>